﻿.layout {
}

    .layout .toolbar-panel {
        padding-left: 300px;
        border-bottom: 1px solid #ccc;
        height: 56px;
        background-image: linear-gradient(to bottom, #ffffff, #f2f2f2);
        overflow: hidden;
    }

        .layout .toolbar-panel .toolbar {
            width: 1000px;
        }

        .layout .toolbar-panel .btns {
            position: absolute;
            top: -10px;
            height: 36px;
            line-height: 36px;
            border-radius: 18px;
            text-align: center;
            
            font-size: 1.2em;
            border: solid 1px #ccc;
            color: grey;
            margin-top: 20px;
            margin-left: 10px;
            cursor: pointer;
        }

        .layout .toolbar-panel .back-button {
            left: 0px;
            padding-left: 20px;
            padding-right: 20px;
        }
        .layout .toolbar-panel .active-button {
            left: 180px;
            padding-left: 10px;
            padding-right: 10px;
            border: none;
            background-color: orangered;
            color: white;
        }
        .layout .toolbar-panel .save-button {
            left: 85px;
            padding-left: 10px;
            padding-right: 10px;
            background-color: #0876e9;
            color: white;
        }

    /***/
    .layout .left-panel {
        width: 300px;
        background-color: #f5f6f7;
        border: none;
        padding: 10px 5px 5px 5px;
    }

        .layout .left-panel .image-panel {
            background-color: rgb(244 239 239 / 0.00);
            border-radius: 10px;
            box-shadow: 0 2px 10px rgb(0 0 0 / 12%);
        }

            .layout .left-panel .image-panel .upload-btn {
                height: 25px;
                line-height: 25px;
                border: none;
                border-radius: 18px;
                text-align: center;
                padding-left: 10px;
                padding-right: 10px;
                color: white;
                background-color: orangered;
                cursor: pointer;
                outline: none;
            }

            .layout .left-panel .image-panel .image-list {
            }

            .layout .left-panel .image-panel .image-item {
                margin-bottom: 20px;
                border: solid 1px #ddd;
            }

                .layout .left-panel .image-panel .image-item .img {
                    width: 100%;
                    height: 130px
                }

                .layout .left-panel .image-panel .image-item .img-name {
                    color: rebeccapurple;
                    overflow: hidden;
                    height: 20px;
                    line-height: 20px;
                    font-size: 0.8em;
                    display: flex;
                    justify-content: space-between;
                }

                    .layout .left-panel .image-panel .image-item .img-name .remove {
                        color: red;
                        margin-left: 5px;
                        margin-right: 5px;
                        cursor: pointer;
                        float: left;
                        margin-top: 5px;
                    }

                    .layout .left-panel .image-panel .image-item .img-name .anme {
                        float: left;
                        width: 110px;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        overflow: hidden;
                    }
    /***/
    .layout .center-panel {
        border: none;
        background-color: #f5f6f7;
        padding: 10px 5px 5px 5px;
    }

        .layout .center-panel .container-panel {
            min-height: 500px;
            background-color: white;
            border-radius: 5px;
            box-shadow: 0 2px 10px rgb(0 0 0 / 12%);
            width: 1000px;
            padding-top: 5px;
            padding-bottom: 5px;
        }

            .layout .center-panel .container-panel .container {
                min-height: 500px;
                margin-left: 50px;
                margin-right: 50px;
            }

        /*attributes*/
        .layout .center-panel .attributes-panel {
            font-size: 1.2em;
            width: 1000px;
            border-radius: 5px;
            box-shadow: 0 2px 10px rgb(0 0 0 / 12%);
            background-color: white;
            margin-bottom: 5px;
            padding-bottom: 5px;
        }

        .layout .center-panel .title-panel {
            border-bottom: solid 1px #ccc;
            margin-left: 50px;
            margin-right: 50px;
            line-height: 50px;
            margin-bottom: 5px;
        }

            .layout .center-panel .title-panel .title {
                height: 40px;
                line-height: 40px;
                border: none;
                outline: none;
                font-size: 1.5em;
                padding-left: 15px;
                padding-right: 15px;
                width: 97%;
            }


        .layout .center-panel .attributes-panel .attr-img {
            display: flex;
            justify-content: space-between;
            margin-left: 50px;
            margin-right: 50px;
            clear: both;
        }
        .layout .center-panel .attributes {
            display: table;
            width:100%;
            clear: both;
        }

            .layout .center-panel .attributes .attr-row {
                display: table-row;
            }

                .layout .center-panel .attributes .attr-row .attr-cell {
                    display: table-cell;
                    vertical-align: middle;
                }

                .layout .center-panel .attributes .attr-row .name-cell {
                    width: 15%;
                    padding-right: 20px;
                    text-align: right;
                    height: 45px;
                    line-height: 45px;
                }

                .layout .center-panel .attributes .attr-row .value-cell {
                    width: 70%;
                }

        .layout .center-panel .previewImg {
            margin-top: 90px;
            width: 250px;
            height: 183px;
            line-height: 183px;
            border: solid 1px #ddd;
            text-align: center;
            cursor: pointer;
        }
            .layout .center-panel .previewImg .img {
                width: 250px;
                height: 183px;
            }
